*{
    margin:0;
    padding:0;
}
@total_width:750;

.w{
    //宽度居中
   width:693/40rem; 
   margin:0 auto;
}
html{
    //??计算法则：100vw/750*40，设置rem的值
    font-size: 100vw/@total_width*40;
    background-color: #eff0f4;
}
a{
    //去除下划线
    text-decoration: none;
        
}
//设置头部header
.top-bar:extend(.w){
    //开启弹性容器
    display: flex;
    //设置高度
    height:175/40rem;
    //居中
    line-height:175/40rem;
    //设置对齐方式
    justify-content: space-between;
    //设置辅抽对齐方式
    align-items: center;
    a{
        color: #242524;
        font-size: 50/40rem;
        i{
            color: #999;
            font-size:40/40rem;
        }
    }
}
//设置banner
.banner:extend(.w){
    img{
        width:100%;
        height:200px;
    }
}

//设置中间菜单
.menu:extend(.w){
    //确定元素的高度
    height:329/40rem;
    //设置弹性元素
    display: flex;
    //设置换行
    flex-flow: row wrap;
    //设置对齐方式
    justify-content: space-between;
    //设置辅轴的对齐方式
    align-content: space-around;
    //设置框的大小
    a{
        width:327/40rem;
        height:104/40rem;
        //垂直方向居中
        line-height: 104/40rem;
        color:white;
        border-radius: 10/40rem;
        i{
            margin:0 20/40rem 0 38/40rem;
        }
    }
    .course{
        background-color: #f97053;
    }
    .star{
        background-color:#cd6efe ;
    }
    .sub{
        background-color: #fe4479;
    }
    .download{
        background-color: #1bc4fb;
    }
}
//设置课程列表
.course-list:extend(.w){
    height:394/40rem;
    display: flex;
    flex-flow: column;
    justify-content:space-between;
    margin-bottom: 46/40rem;
    .title{
        display: flex;
        //主轴空间
        justify-content: space-between;
        //辅轴对齐
        align-items: center;
        h2{
            font-size: 33/40rem;
            color:#24253d;
            border-left:2px solid #3a84ff;
            padding-left: 4px;
        }
        a{
            font-size: 28/40rem;
            color:#656565;
        }
    }
}
//设置课程列表项
.item{
    box-sizing: border-box;
    width:320/40rem;
    height:324/40rem;
    padding:0 22/40rem;
    background-color: #fff;
    box-shadow: 0 0 10px rgba(0,0,0,.3);
    border-radius: 5px;
    display: flex;
    flex-flow: column;
    justify-content: space-evenly;
    //设置图片宽度
    img{
        width:100%;
    }
    //课程标题
    .course-title{
        font-size: 32/40rem;
        color:#24253d;
    }
    //用户信息
    .user-info{
        display: flex;
        align-items: center;
    }
    //头像
    .avatar{
        width:42/40rem;
        height:42/40rem;
    }
    //用户昵称
    .nickname{
        margin-left: 4px;
        font-size: 24/40rem;
        color:#969393;
    }
   
}